<template>
  <ButtonGroup size="small">
      <Button v-show="!notSelectOneMode()"  @click="flip('X')"><img src="../assets/icons/flipY.png" width="14" height="14"><img /></Button>
      <Button v-show="!notSelectOneMode()" @click="flip('Y')"><img src="../assets/icons/flipX.png" width="14" height="14"><img /></Button>
  </ButtonGroup>
</template>

<script>
import select from '@/mixins/select'
export default {
  name: 'ToolBar',
  mixins: [select],
  data() {
    return {
    };
  },
  methods:{
    // 非单选时，禁止镜像操作
    notSelectOneMode(){
      return this.mSelectMode !== 'one'
    },
    flip(type){
      const activeObject = this.canvas.c.getActiveObject();
      console.log(activeObject)
      const x = activeObject.scaleX;
      const y = activeObject.scaleY;
      activeObject.set('scale' + type, -1).setCoords().scale(x)

      this.canvas.c.requestRenderAll()
    }
  }
};
</script>

<style scoped lang="less">
/deep/ .ivu-btn[disabled]{
  img{ opacity: 0.2;}
}
</style>
